<template>
	<div class="pageStyle">
		<div class="pageStyle-head">
			<span>{{i18n('pageConfiguration','页面配置')}}</span>
			<a style="margin-right: 5px;" @click="setParams">{{i18n('paraConfig','传入参数配置')}}</a>
		</div>
		<div>
			<a-form layout="vertical" :rules="rules" :model="screenViewMdl">
				<a-collapse default-active-key="1" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel key="1" :header="i18n('pageInfo','页面基本信息')">
						<a-form-item :label="$ti18('rxForm.name', '名称')" prop="name">
                            <lang-input v-model="screenViewMdl.name" :placeholder="i18n('msa.nameMsa', '请输入名称')"></lang-input>
						</a-form-item>
						<a-form-item :label="$ti18('rxForm.rxAlias', '别名')" prop="alias">
							<a-input :placeholder="i18n('msa.aliasMsa', '请输入别名')" v-model:value="screenViewMdl.alias"/>
						</a-form-item>
						<a-form-item :label="screenLangI18n('form.classify','分类')" prop="categoryId">
							<rx-category-select v-model="screenViewMdl.categoryId" cat-key="SCREEN" :isGrant="true" :appId="appId"
												style="width: 100%;"></rx-category-select>
						</a-form-item>
					</a-collapse-panel>
					<a-collapse-panel key="2" :header="i18n('pageTheme','页面主题')">
						<a-form-item label="风格模式">
							<a-radio-group v-model:value="screenConfig.globalConfig.mode" @change="onChange">
								<a-radio value="bright">{{i18n('bright','亮色模式')}}</a-radio>
								<a-radio value="dark">{{i18n('dark','暗黑模式')}}</a-radio>
							</a-radio-group>
						</a-form-item>
						<theme-colors :colors="screenConfig.globalConfig.colors" @themeColors="themeColors"></theme-colors>
					</a-collapse-panel>
					<a-collapse-panel key="3" :header="i18n('pageBackground','页面背景')">
						<upload-common :globalConfig="screenConfig.globalConfig" @uploadCommon="uploadCommon"></upload-common>
						<a-form-item :label="i18n('resizingMode','背景图缩放方式')">
							<a-select default-value="system" style="width: 100%"
									  v-model:value="screenConfig.globalConfig.bgZoom">
								<a-select-option value="system">{{i18n('system','拉伸铺满')}}</a-select-option>
								<a-select-option value="custom">{{i18n('custom','水平拉伸铺满')}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-collapse-panel>
				</a-collapse>
			</a-form>
		</div>
	</div>
</template>

<script>
import {Util} from '@lowcode/jpaas-base-lib';
import { RxCategorySelect } from '@lowcode/jpaas-share-component';
import ParamConfigDef from "@/views/modules/design/dialog/param-config-def.vue";
import UploadCommon from "@/views/modules/design/right-component/common/upload-common.vue"
import ThemeColors from "@/views/modules/design/right-component/common/theme-colors.vue"
import useMain from "../../../../stores/use-main";
import {mapState} from 'pinia';
import LangInput from "@/langauge-input/lang-input.vue";

export default {
	name: "PageStyle",
	props: ["screenView", "screenConfig"],
	components:{
        UploadCommon,
        ThemeColors,
        RxCategorySelect,
        LangInput
	},
    computed: {
        ...mapState(useMain, ["appId"])
    },
	data() {
		return {
            screenViewMdl:{
                name:"",
                alias:"",
                categoryId:"",
            },
			fileList: [],
			rules: {
				name: [{ required:true,message:this.i18n('msa.nameMsa', '请输入名称'), trigger: 'change' }],
				alias: [
				    { required:true,message:this.i18n('msa.aliasMsa', '请输入别名'), trigger: 'change' },
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n('msa.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
				categoryId: [{ required:true,message:this.i18n('msa.selectTips','请选择分类'), trigger: 'blur' }],
			},
		}
	},
	created() {
	    if(this.screenView){
	        this.screenViewMdl=this.screenView;
        }
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"pageStyleLang",key);
		},
		screenLangI18n(name,text,key){
			return this.$ti18(name,text,"screenLang",key);
		},
		setParams() {
			let paramConfig = this.screenConfig.params || [];
			let self = this;
			let conf = {
				curVm: this,
				component: ParamConfigDef,
				title:this.i18n('paraConfig','传入参数配置') ,
				widthHeight: ['1200px', '700px'],
                zIndex:999,
				data: {
					paramConfig: paramConfig
				}
			};
			Util.open(conf, function (action, data) {
				if (action != 'ok') return;
                self.screenConfig["params"]=data;

			});
		},
		themeColors(time){
			this.screenConfig.globalConfig.colors = time
		},
		uploadCommon(globalConfig){
			this.screenConfig.globalConfig = Object.assign(this.screenConfig.globalConfig,globalConfig)
		},
		onChange(){
			this.screenConfig.globalConfig.bgImage =1
		}
	}
}
</script>

<style scoped lang="less">
.pageStyle-img-system {
	border-radius: 4px;
	border: dashed 1px #dedede;
	margin-top: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.pageStyle {
	.ant-collapse-borderless {
		background: white !important;
	}

	.ant-collapse-arrow {
		left: 0px !important;
	}
}

.pageStyle-head {
	height: 50px;
	display: flex;
	line-height: 50px;
	border-bottom: 1px solid #dedede;
	align-items: center;

	span {
		color: #333333;
		font-size: 14px;
		font-weight: bold;
		flex: 1;
	}
}
</style>
